<template>
  <div>
    <div class="block">
      <span class="demonstration">多选可搜索</span>
      <el-cascader
        ref="cascaderEl"
        v-model="value1"
        collapse-tags
        placeholder="试试搜索：指南"
        :options="options"
        popper-class="test-demo"
        :props="{ multiple: true }"
        filterable
        @visible-change="visibleChange"
        @change="onChange"
      ></el-cascader>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      num: 0,
      value1: [],
      options: [
        {
          value: "zhinan",
          label: "指南",
          children: [
            {
              value: "shejiyuanze",
              label: "设计原则",
              children: [
                {
                  value: "yizhi",
                  label: "一致",
                },
                {
                  value: "fankui",
                  label: "反馈",
                },
                {
                  value: "xiaolv",
                  label: "效率",
                },
                {
                  value: "kekong",
                  label: "可控",
                },
              ],
            },
            {
              value: "daohang",
              label: "导航",
              children: [
                {
                  value: "cexiangdaohang",
                  label: "侧向导航",
                },
                {
                  value: "dingbudaohang",
                  label: "顶部导航",
                },
              ],
            },
          ],
        },
        {
          value: "zujian",
          label: "组件",
          children: [
            {
              value: "basic",
              label: "Basic",
              children: [
                {
                  value: "layout",
                  label: "Layout 布局",
                },
                {
                  value: "color",
                  label: "Color 色彩",
                },
                {
                  value: "typography",
                  label: "Typography 字体",
                },
                {
                  value: "icon",
                  label: "Icon 图标",
                },
                {
                  value: "button",
                  label: "Button 按钮",
                },
              ],
            },
            {
              value: "form",
              label: "Form",
              children: [
                {
                  value: "radio",
                  label: "Radio 单选框",
                },
                {
                  value: "checkbox",
                  label: "Checkbox 多选框",
                },
                {
                  value: "input",
                  label: "Input 输入框",
                },
                {
                  value: "input-number",
                  label: "InputNumber 计数器",
                },
                {
                  value: "select",
                  label: "Select 选择器",
                },
                {
                  value: "cascader",
                  label: "Cascader 级联选择器",
                },
                {
                  value: "switch",
                  label: "Switch 开关",
                },
                {
                  value: "slider",
                  label: "Slider 滑块",
                },
                {
                  value: "time-picker",
                  label: "TimePicker 时间选择器",
                },
                {
                  value: "date-picker",
                  label: "DatePicker 日期选择器",
                },
                {
                  value: "datetime-picker",
                  label: "DateTimePicker 日期时间选择器",
                },
                {
                  value: "upload",
                  label: "Upload 上传",
                },
                {
                  value: "rate",
                  label: "Rate 评分",
                },
                {
                  value: "form",
                  label: "Form 表单",
                },
              ],
            },
            {
              value: "data",
              label: "Data",
              children: [
                {
                  value: "table",
                  label: "Table 表格",
                },
                {
                  value: "tag",
                  label: "Tag 标签",
                },
                {
                  value: "progress",
                  label: "Progress 进度条",
                },
                {
                  value: "tree",
                  label: "Tree 树形控件",
                },
                {
                  value: "pagination",
                  label: "Pagination 分页",
                },
                {
                  value: "badge",
                  label: "Badge 标记",
                },
              ],
            },
            {
              value: "notice",
              label: "Notice",
              children: [
                {
                  value: "alert",
                  label: "Alert 警告",
                },
                {
                  value: "loading",
                  label: "Loading 加载",
                },
                {
                  value: "message",
                  label: "Message 消息提示",
                },
                {
                  value: "message-box",
                  label: "MessageBox 弹框",
                },
                {
                  value: "notification",
                  label: "Notification 通知",
                },
              ],
            },
            {
              value: "navigation",
              label: "Navigation",
              children: [
                {
                  value: "menu",
                  label: "NavMenu 导航菜单",
                },
                {
                  value: "tabs",
                  label: "Tabs 标签页",
                },
                {
                  value: "breadcrumb",
                  label: "Breadcrumb 面包屑",
                },
                {
                  value: "dropdown",
                  label: "Dropdown 下拉菜单",
                },
                {
                  value: "steps",
                  label: "Steps 步骤条",
                },
              ],
            },
            {
              value: "others",
              label: "Others",
              children: [
                {
                  value: "dialog",
                  label: "Dialog 对话框",
                },
                {
                  value: "tooltip",
                  label: "Tooltip 文字提示",
                },
                {
                  value: "popover",
                  label: "Popover 弹出框",
                },
                {
                  value: "card",
                  label: "Card 卡片",
                },
                {
                  value: "carousel",
                  label: "Carousel 走马灯",
                },
                {
                  value: "collapse",
                  label: "Collapse 折叠面板",
                },
              ],
            },
          ],
        },
        {
          value: "ziyuan",
          label: "资源",
          children: [
            {
              value: "axure",
              label: "Axure Components",
            },
            {
              value: "sketch",
              label: "Sketch Templates",
            },
            {
              value: "jiaohu",
              label: "组件交互文档",
            },
          ],
        },
      ],
      presentTags: [],
    };
  },
  methods: {
    //获取选中的标签（参考源码-cascader.vue文件同方法名）
    computePresentTags() {
      const checkedNodes = this.$refs.cascaderEl.getCheckedNodes(true);
      const tags = [];

      if (checkedNodes.length) {
        checkedNodes.forEach((node) =>
          tags.push({
            node,
            key: node.uid,
            text: node.getText(true, "/"),
          })
        );
      }
      this.presentTags = tags;
      console.log(tags, "tags");
    },
    onChange() {
      //需使用nextTick，等节点更新之后再执行
      this.$nextTick(() => {
        this.computePresentTags();
        //全删
        this.visibleChange(false);
        //全入
        this.visibleChange(true);
      });
    },
    visibleChange(val) {
      const _this = this;
      const testDemoEl = document.querySelector(".test-demo");
      const elCascaderPanelEl = testDemoEl.querySelector(".el-cascader-panel");
      if (val) {
        const valueList = document.createElement("div");
        valueList.classList.add("value-list");
        valueList.addEventListener("click", function (evt) {
          const target = evt.target;
          if (target.tagName === "I") {
            const pNode = target.parentNode;
            const nodePath = target.dataset.nodePath;
            if (nodePath != null) {
              const tagIndex = _this.value1.findIndex((item, i) => {
                return JSON.stringify(item) === nodePath;
              });
              _this.value1 = _this.value1.filter((item, i) => i != tagIndex);
              pNode.remove();
            }
          }
        });

        this.presentTags.forEach((tag, i) => {
          const valueItem = document.createElement("div");
          valueItem.classList.add("value-item");
          const spanEl = document.createElement("span");
          spanEl.innerText = tag.text;
          valueItem.appendChild(spanEl);
          const iEl = document.createElement("i");
          iEl.dataset.nodePath = JSON.stringify(tag.node.path);
          iEl.classList.add("el-tag__close", "el-icon-close");
          valueItem.appendChild(iEl);

          valueList.appendChild(valueItem);
        });
        elCascaderPanelEl.appendChild(valueList);
        //需要等dom加载完成之后执行
        setTimeout(() => {
          if (valueList.clientHeight > 100) {
            elCascaderPanelEl.style.paddingTop = 100 + "px";
            valueList.style.height = 100 + "px";
          } else {
            elCascaderPanelEl.style.paddingTop = valueList.clientHeight + "px";
            valueList.style.height = valueList.clientHeight + "px";
          }
        });
      } else {
        const allValueList = elCascaderPanelEl.querySelectorAll(".value-list");
        for (let i = 0; i < allValueList.length; i++) {
          const element = allValueList[i];
          elCascaderPanelEl.removeChild(element);
        }
      }
    },
  },
};
</script>
<style>
.test-demo .el-cascader__suggestion-item {
  position: relative;
  flex-direction: row-reverse;
  justify-content: flex-end;
}
.test-demo .el-cascader__suggestion-item span {
  margin-right: 0;
  margin-left: 10px;
}

.test-demo .el-cascader__suggestion-item .el-icon-check {
  position: absolute;
  left: 17px;
}
.test-demo .el-cascader__suggestion-item:after {
  display: block;
  content: "";
  height: 17px;
  width: 17px;
  border: 1px solid #ccc;
}
.el-cascader-panel {
  position: relative;
}
.value-list {
  position: absolute;
  top: 10px;
  left: 0;
  width: calc(100% - 20px);
  overflow: auto;
  padding: 0 10px;
}
.value-item {
  margin-bottom: 4px;
  padding: 0 6px;
  background-color: #f4f4f5;
  border-color: #e9e9eb;
  color: #909399;
  height: 24px;
  padding: 0 8px;
  line-height: 22px;
  border-radius: 2px;
}
.value-item .el-icon-close {
  border-radius: 50%;
  cursor: pointer;
  transform: scale(0.8);
  margin-left: 5px;
}
.value-item .el-icon-close:hover {
  color: #fff;
  background-color: #909399;
}
</style>
